<template>
    <VueDragResize :isActiyve="false" :w="200" :h="0" v-on:resizing="resize" v-on:dragging="resize" :isResizable="false"
        :parentLimitation="false" :parentW="w" :parentH="h" :x="y" :y="150">
        <div class="settingDailog el-fade-in-linear" :class="{ 'active': dailogShow }">
            <div class="settingDailog_title">
                <div class="settingDailog_title_content">
                    自动浏览设置
                </div>
                <div class="settingDailog_title_icon el-icon-close" @click="closedSetting">

                </div>
            </div>
            <div class="settingDailog_containers" @mousedown="mouseStop">
                <div class="settingDailog_content">
                    <div class="settingDailog_content_item">
                        <div class="settingDailog_content_item_title">
                            移动模式
                        </div>
                        <div class="settingDailog_content_item_btn groupBtn">
                            <span class="groupBtn_span " @click="changeModel(1)"
                                :class="modelTpe == 1 ? 'active' : ''">手动</span>
                            <span class="groupBtn_span" @click="changeModel(2)"
                                :class="modelTpe == 2 ? 'active' : ''">自动</span>
                        </div>

                    </div>
                    <div class="settingDailog_content_item">
                        <div class="settingDailog_content_item_title">
                            方向
                        </div>
                        <div class="settingDailog_content_item_btn">
                            <div class=" groupBtn" style="margin-right:24px;margin-bottom:4px;">
                                <span class="groupBtn_span" :class="direction == 'down' ? 'active' : ''"
                                    @click="changeDirection('down')">
                                    <!-- 上 -->
                                    <i class="el-icon-arrow-up"></i>
                                </span>
                            </div>
                            <div class=" groupBtn">
                                <span class="groupBtn_span" :class="direction == 'right' ? 'active' : ''"
                                    @click="changeDirection('right')">
                                    <!-- 左 -->
                                    <i class="el-icon-arrow-left"></i></span>
                                <span class="groupBtn_span" :class="direction == 'up' ? 'active' : ''"
                                    @click="changeDirection('up')">
                                    <!-- 下 -->
                                    <i class="el-icon-arrow-down"></i></span>

                                <span class="groupBtn_span" :class="direction == 'left' ? 'active' : ''"
                                    @click="changeDirection('left')">
                                    <!-- 右 -->
                                    <i class="el-icon-arrow-right"></i></span>
                            </div>
                        </div>


                    </div>
                    <div class="settingDailog_content_item">
                        <div class="settingDailog_content_item_title">
                            移动速率
                        </div>
                        <div class="settingDailog_content_item_btn groupBtn">
                            <input v-model="speed" style="width: 60px" value="0" type="text" id="speed"
                                @input="changeSpeed" />
                        </div>

                    </div>
                    <div class="settingDailog_content_item" v-if="modelTpe == 2">
                        <div class="settingDailog_content_item_title">
                            自动启停
                        </div>
                        <div class="settingDailog_content_item_btn groupBtn">
                            <span class="groupBtn_span" :class="isStatrt ? '' : 'active'"
                                @click="changeIsStart(false)">停止</span>
                            <span class="groupBtn_span" :class="isStatrt ? 'active' : ''"
                                @click="changeIsStart(true)">启动</span>
                        </div>

                    </div>
                    <div class="settingDailog_content_item" v-if="modelTpe == 1">
                        <div class="settingDailog_content_item_title">
                            手动移动
                        </div>
                        <div class="settingDailog_content_item_btn groupBtn">

                            <span class="groupBtn_span active" @click="stepIsStart()">开始移动</span>
                        </div>

                    </div>


                </div>
            </div>

        </div>
    </VueDragResize>
</template>

<script>
const { body } = document
import VueDragResize from 'vue-drag-resize'
export default {
    name: 'autoScan',
    props: {


    },
    components: {
        VueDragResize
    },

    data() {
        return {
            dailogShow: false,
            modelTpe: 2,//1 手动  2 自动
            direction: 'down',
            speed: 5,
            isStatrt: false,
            width: 0,
            height: 0,
            top: 0,
            w: document.documentElement.clientWidth,
            h: document.documentElement.clientHeight - 50,
            left: 0,
            y: 200
        }
    },
    computed: {

    },
    created() {

    },
    beforeMount() {
        window.addEventListener('resize', this.$_resizeHandlery)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.$_resizeHandlery)
    },
    mounted() {

    },
    methods: {
        mouseStop(e) {
            e.stopPropagation();//阻止冒泡
        },
        $_resizeHandlery() {
            this.y = body.getBoundingClientRect().width - 525
        },
        resize(newRect) {
            this.width = newRect.width
            this.height = newRect.height
            this.top = newRect.top
            this.left = newRect.left
        },
        open() {
            this.y = body.getBoundingClientRect().width - 525
            this.dailogShow = true
        },
        closed() {
            this.dailogShow = false
            this.changeIsStart(false)
        },
        closedSetting() {
            this.$emit("closed", 'autoScan')
        },
        changeModel(type) {//切换模式
            if (type == this.modelTpe) {
                return false
            }
            this.modelTpe = type
            this.isStatrt = false
            this.autoScanEvent("modeType")
        },
        changeDirection(type) {//切换方向
            if (type == this.direction) {
                return false
            }
            this.direction = type
            this.autoScanEvent("direction")
        },
        changeIsStart(type) {//自动启停
            if (type == this.isStatrt) {
                return false
            }
            this.isStatrt = type
            this.autoScanEvent('start')
        },
        changeSpeed() {
            this.autoScanEvent('speed')
        },
        autoScanEvent(type) { //浏览事件切换
            let obj = {
                modelTpe: this.modelTpe,
                moveDirection: this.direction,
                speed: this.speed,
                status: this.isStatrt ? '启动' : '停止',
                evetType: type

            }
            this.$emit("autoScanEvent", obj)
        },
        stepIsStart() {
            this.autoScanEvent('stepIsStart')
        },





    }
}
</script>

<style lang="scss" scoped>
.vdr.active:before {
    outline: none !important;
}

.settingDailog {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;

    width: 200px;
    /* top: 150px;
    right: 130px;*/
    z-index: -1;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    background-color: rgba(40, 49, 66, .7);
    border-radius: 10px;
    opacity: 0;
    height: 0px;
    padding: 10px;
    position: relative;
    box-sizing: border-box;
    cursor: move;

    .settingDailog_title {
        display: flex;
        color: #fff;
        line-height: 40px;
        align-items: center;
        justify-content: space-between;
        position: relative;

        .settingDailog_title_content {
            font-weight: 400;
        }

        .settingDailog_title_icon {
            cursor: pointer;
        }
    }
}

#speed {
    text-align: center;
}

.settingDailog.active {
    opacity: 1;
    height: 280px;
    z-index: 1;
}

.settingDailog.active.active0 {
    opacity: 1;
    height: 230px;
    z-index: 1;
}

.settingDailog_containers {
    background: #000;
    border-radius: 10px;
    cursor: default;
}

.settingDailog_content_item {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    color: #fff;

    .settingDailog_content_item_title {
        width: 60px;
        font-size: 14px;
    }

    .settingDailog_content_item_btn {
        width: calc(100% - 60px);
    }

    .groupBtn {
        display: flex;
        font-size: 12px;
        flex-wrap: wrap;
        justify-content: flex-end;

        .groupBtn_span {
            margin: 0 2px;
            cursor: pointer;
            background: #fff;
            padding: 4px;
            color: #333;
            border-radius: 2px;
        }

        .groupBtn_span.active {
            background: rgb(58, 98, 215);
            font-weight: 600;
            color: #fff;
        }
    }
}
</style>

